<template>
    <div class="expert-list">
      <h2>专家库</h2>
      <el-card v-for="expert in experts" :key="expert.id" class="expert-card">
        <div class="expert-header">
          <img :src="expert.avatar" class="expert-avatar">
          <h3>{{ expert.name }}</h3>
        </div>
        <div class="expert-info">
          <p>{{ expert.title }}</p>
          <p>{{ expert.description }}</p>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const experts = ref([
    {
      id: 1,
      name: '张某某',
      title: '农业专家',
    //   avatar: 'https://example.com/avatar1.jpg',
      description: '专注生态农业研究20年'
    },
    {
      id: 2,
      name: '郑某某',
      title: '水产专家',
    //   avatar: 'https://example.com/avatar2.jpg',
      description: '海洋资源开发专家'
    }
    {
      id: 3,
      name: '陈某某',
      title: '水产专家',
    //   avatar: 'https://example.com/avatar2.jpg',
      description: '海洋资源开发专家'
    }
  ])
  </script>
  
  <style scoped>
  .expert-list {
    padding: 20px;
  }
  
  .expert-card {
    margin-bottom: 20px;
    border: 1px solid #eee;
  }
  
  .expert-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  </style>